import React from 'react'
import { CSSTransition } from 'react-transition-group'
import { connect } from 'react-redux'
import { headerActionCreators } from './store'
import { actionCreator as loginActionCreators } from '../../pages/login/store'
import { Link } from 'react-router-dom'
import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  NavSearch,
  Addition,
  Button,
  SearchWrapper,
  SearchInfo,
  SearchInfoTitle,
  SearchInfoSwitch,
  SearchInfoList,
  SearchInfoItem
} from './style'

class Header extends React.Component {
  getListArea () {
    const { list, page, focus, mouseIn, totalPage, handleMouseEnter, handleMouseLeave, handleChangePage} = this.props
    let pageList = []
    let jsList = list.toJS()
    for (let i = (page - 1) * 10; i < page * 10; i++) {
      pageList.push(
        <SearchInfoItem key={i}>{jsList[i]}</SearchInfoItem>
      )
    }
    if (focus || mouseIn) {
      return (
        <SearchInfo
          onMouseEnter={() => handleMouseEnter()}
          onMouseLeave={() => handleMouseLeave()}
        >
          <SearchInfoTitle>
            热门搜索
            <SearchInfoSwitch onClick={() => handleChangePage(page, totalPage, this.spinIcon)}>
              <i ref={(icon) => {this.spinIcon = icon}} className="iconfont spin">&#xe635;</i>
              换一批
            </SearchInfoSwitch>
            <SearchInfoList>
              {pageList}
            </SearchInfoList>
          </SearchInfoTitle>
        </SearchInfo>
      )
    }
  }
  render () {
    const { focus, handleInputFocus, list, login } = this.props
    return (
      <HeaderWrapper>
          <Link to="/">
            <Logo />
          </Link>
          <Nav>
            <NavItem className="left active">首页</NavItem>
            <NavItem className="left">下载APP</NavItem>
            {
              !login ?
                <Link to="/login">
                  <NavItem className="right">登录</NavItem>
                </Link> :
              <NavItem className="right" onClick={() => this.props.logOut()}>退出</NavItem>
            }
            <NavItem className="right">
              <i className="iconfont">&#xe636;</i>
            </NavItem>
            <SearchWrapper>
              <CSSTransition
                timeout={200}
                in={focus}
                classNames = "slide"
              >
                <NavSearch
                  className={focus ? 'focused' : ''}
                  onFocus={() => handleInputFocus(true, list)}
                  onBlur={() => handleInputFocus(false, list)}
                ></NavSearch>
              </CSSTransition>
            <i className={focus ? 'search-icon iconfont focused' : 'search-icon iconfont'}>&#xe623;</i>
              {/* 热门搜索 */}
              {this.getListArea()}
            </SearchWrapper>
          </Nav>
          <Addition>
            <Button className="writing">
              <i className="iconfont">&#xe708;</i>
              <span>写文章</span>
            </Button>
            <Button className="reg">注册</Button>
          </Addition>
        </HeaderWrapper>
    )
  }
}
const mapStateToProps = (state) => {
  return {
     // immutable对象要使用get方法获取值
    // focus: state.get('header').get('focus')
    focus: state.getIn(['header', 'focus']),
    list: state.getIn(['header', 'list']),
    totalPage: state.getIn(['header', 'totalPage']),
    page: state.getIn(['header', 'page']),
    mouseIn: state.getIn(['header', 'mouseIn']),
    login: state.getIn(['login', 'login'])
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    logOut () {
      dispatch(loginActionCreators.logOut())
    },
    handleInputFocus(value, list) {
      value && list.length <= 0 && dispatch(headerActionCreators.getList())
      dispatch(headerActionCreators.changeInputStatus(value))
    },
    handleMouseEnter () {
      dispatch(headerActionCreators.changeMouseEnter())
    },
    handleMouseLeave () {
      dispatch(headerActionCreators.changeMouseLeave())
    },
    handleChangePage (page, totalPage, spin) {
      let originAngle = Number(spin.style.transform.replace(/[^0-9]/ig, '') || 0)
      spin.style.transform = `rotate(${originAngle+=90}deg)`
      dispatch(headerActionCreators.changePage(page, totalPage))
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Header)